<template>
  <div class="app-container">
    <div class="mainbox">
      <div class="filter-container">
        <el-form v-show="showSearch" ref="queryForm" :model="queryParams" :inline="true" label-width="68px" @submit.native.prevent>
          <el-form-item label="流程名称" prop="processName">
            <el-input
              v-model.trim="queryParams.processName"
              placeholder="请输入内容"
              class="filter-item limit"
              maxlength="20"
              clearable
              size="small"
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>
          <el-form-item label="流程类型" prop="categoryId">
            <el-select v-model="queryParams.categoryId" placeholder="请选择" clearable size="small">
              <el-option
                v-for="item in categoryList"
                :key="item.categoryId"
                :label="item.categoryName"
                :value="item.categoryId"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="发布状态" prop="status">
            <el-select v-model="queryParams.status" placeholder="请选择" clearable size="small">
              <el-option
                v-for="dict in dict.type.publishStatus"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              />
            </el-select>
          </el-form-item>
        </el-form>
        <div class="flex-1" />
        <div>
          <div class="flex-1" />
          <div style="display:flex;">
            <el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
            <el-button icon="el-icon-refresh" @click="handleReset">重置</el-button>
          </div>
        </div>
      </div>
      <div class="table-container table-fullscreen">
        <div class="table-opt-container">
          <div class="flex-1" />
          <dt-dialog-column v-model="isShowTable" :columns="showColumns" :table-ref="$refs.table" @queryTable="getList" />
        </div>
        <el-table
          v-if="isShowTable"
          ref="table"
          v-loading="loading"
          border
          :header-cell-style="{ backgroundColor: '#f2f2f2'}"
          highlight-current-row
          :data="releaseMagList"
        >
          <template slot="empty">
            <p>{{ $store.getters.dataText }}</p>
          </template>
          <el-table-column
            fixed="left"
            type="index"
            label="序号"
            width="70"
            :index="(index)=>(queryParams.pageNo - 1) * queryParams.pageSize + index + 1"
          />
          <el-table-column v-if="showColumns[0].show" key="processName" label="流程名称" show-overflow-tooltip align="center" prop="processName" />
          <el-table-column v-if="showColumns[1].show" key="processKey" label="流程编码" show-overflow-tooltip align="center" prop="processKey" />
          <el-table-column v-if="showColumns[2].show" key="categoryName" label="流程类型" show-overflow-tooltip align="center" prop="categoryName">
            <template slot-scope="scope">{{ getCategory(scope.row) }}</template>
          </el-table-column>
          <el-table-column v-if="showColumns[3].show" key="version" label="版本号" show-overflow-tooltip align="center" prop="version" />
          <el-table-column v-if="showColumns[4].show" key="status" label="发布状态" show-overflow-tooltip align="center" prop="status">
            <template slot-scope="scope">
              <dt-dict-tag :options="dict.type.publishStatus" :value="scope.row.status" />
            </template>
          </el-table-column>
          <el-table-column v-if="showColumns[5].show" key="description" label="描述" show-overflow-tooltip align="center" prop="description" />
          <el-table-column
            v-if="showColumns[6].show"
            key="isEnable"
            prop="isEnable"
            label="是否启用"
            :show-overflow-tooltip="true"
          >
            <template slot-scope="scope">
              <el-switch
                v-model="scope.row.isEnable"
                :disabled="scope.row.isEnable == 1 || scope.row.status != 1"
                prop="isEnable"
                :active-value="1"
                :inactive-value="2"
                @change="statusChange(scope.row)"
              />
            </template>
          </el-table-column>
          <el-table-column :key="Math.random()" label="操作" fixed="right" align="center" class-name="small-padding fixed-width" width="300">
            <template slot-scope="scope">
              <el-button
                v-permission="['RELEASEMAG_RELEASEMAG_DETAIL_BUTTON']"
                size="small"
                @click="handleDetail(scope.row)"
              >查看流程</el-button>
              <el-button
                v-permission="['RELEASEMAG_RELEASEMAG_ENTRY_BUTTON']"
                :disabled="scope.row.isEnable != 1"
                size="small"
                @click="enterConfig(scope.row)"
              >入口配置</el-button>
              <el-dropdown style="margin-left: 10px">
                <el-button
                  v-permission="['RELEASEMAG_RELEASEMAG_DROPDOWN_BUTTON']"
                  :disabled="releaseMagList.length<=0"
                  size="small"
                >更多<i class="el-icon-arrow-down el-icon--right" /></el-button>
                <el-dropdown-menu slot="dropdown" style="width:80px;text-align:center">
                  <el-dropdown-item
                    v-if="scope.row.status != 1"
                    @click.native="handleRelease(scope.row)"
                  >发布</el-dropdown-item>
                  <el-dropdown-item
                    v-if="scope.row.status == 1"
                    @click.native="handleSuspend(scope.row)"
                  >挂起</el-dropdown-item>
                  <!-- :disabled="scope.row.isEnable == 1" -->
                  <el-dropdown-item
                    :disabled="scope.row.status == 1"
                    @click.native="handleDelete(scope.row)"
                  >删除</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </template>
          </el-table-column>
        </el-table>
        <dt-pagination
          v-show="total>0"
          :total="total"
          :page.sync="queryParams.pageNo"
          :limit.sync="queryParams.pageSize"
          @pagination="getList"
        />
      </div>
    </div>
    <!-- 发布对话框 -->
    <dt-dialog
      :title="title"
      :visible.sync="open"
      @comfirmBtn="submitForm"
      @closeDialog="cancel"
    >
      <div slot="content">
        <el-form
          ref="form"
          :model="form"
          :rules="rules"
          label-width="82px"
        >
          <el-form-item label="入口名称" prop="entranceName">
            <el-input v-model.trim="form.entranceName" placeholder="请输入入口名称" maxlength="20" show-word-limit class="limit" />
          </el-form-item>
          <el-form-item label="分类名称" prop="categoryId">
            <el-select v-model="form.categoryId" placeholder="请选择流程类型" style="width: 670px;">
              <el-option
                v-for="item in categoryList"
                :key="item.categoryId"
                :label="item.categoryName"
                :value="item.categoryId"
              />
            </el-select>
          </el-form-item>
          <el-row>
            <el-col :span="24">
              <el-form-item label="图标" prop="icon" class="icon_class">
                <!-- 图标选择器 -->
                <icon-picker :icon="form.icon" @change="handleSelectedIcon" />
                <i class="el-icon-delete" @click="form.icon = ''" />
                <!-- <el-button class="selected-icon-button" type="small">删除图标</el-button> -->
              </el-form-item>
            </el-col>
          </el-row>
          <el-form-item label="排序" prop="sort">
            <el-input v-model.trim="form.sort" placeholder="请输入排序" maxlength="8" show-word-limit class="limit" />
          </el-form-item>
          <el-form-item label="描述" prop="description">
            <el-input v-model.trim="form.description" type="textarea" maxlength="200" placeholder="请输入内容" show-word-limit class="limit" />
          </el-form-item>
        </el-form>
      </div>
    </dt-dialog>
    <!-- 详情弹框 -->
    <dt-dialog
      title="流程图展示"
      :visible.sync="imgDialog"
      :footer-slot="true"
    >
      <div slot="content" class="processImg">
        <img style="max-width: 100%; max-height: 100%" :src="imgUrl">
      </div>
    </dt-dialog>
  </div>
</template>
<script>
import { categoryList, listreleaseMag, readImage, updateState, detail, Release, delreleaseMag, changeStatus } from '@/framework/api/releaseMag/releaseMag'
import IconPicker from './component/IconPicker/index.vue'
export default {
  name: 'ReleaseMag',
  components: {
    IconPicker
  },
  dicts: ['processType', 'publishStatus'],
  data() {
    return {
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 显隐表格
      isShowTable: true,
      // 列显隐数组
      showColumns: [
        { prop: 'processName', label: '流程名称', show: true },
        { prop: 'processKey', label: '流程编码', show: true },
        { prop: 'categoryName', label: '流程类型', show: true },
        { prop: 'version', label: '版本号', show: true },
        { prop: 'status', label: '发布状态', show: true },
        { prop: 'description', label: '描述', show: true },
        { prop: 'statusFlag', label: '状态', show: true }
      ],
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 获取表格数据
      releaseMagList: [],
      // 流程类型列表
      categoryList: [],
      // 弹出层标题
      title: '',
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        pageNo: 1,
        pageSize: 10,
        categoryId: null,
        status: null,
        processName: null
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        entranceName: [
          { required: true, message: '入口名称不能为空', trigger: 'blur' }
        ],
        categoryId: [
          { required: true, message: '流程类型不能为空', trigger: 'change' }
        ],
        icon: [
          { required: true, message: '图标不能为空', trigger: 'blur' }
        ],
        sort: [
          { required: true, message: '排序不能为空', trigger: 'blur' },
          { trigger: 'blur', validator: (rule, value, callback) => {
            if (!this.validate.checkSort(value)) {
              callback(new Error('排序格式错误'))
            } else callback()
          }
          }
        ]
      },
      imgDialog: false,
      imgUrl: null
    }
  },
  created() {
    this.initData()
  },
  methods: {
    initData() {
      this.getList()
      this.getCategoryList()
    },
    // 获取流程类型列表
    getCategoryList() {
      categoryList().then(res => {
        this.categoryList = res.data
      })
    },
    /** 查询列表 */
    getList() {
      this.loading = true
      listreleaseMag(this.queryParams).then(({ data: response }) => {
        this.releaseMagList = response.rows
        this.total = response.totalRows
        this.loading = false
      })
    },
    getCategory(row) {
      if (row.status === 0 || row.categoryName === '') {
        row.categoryName = '-'
        return row.categoryName
      } else {
        return row.categoryName
      }
    },
    // 取消按钮
    cancel() {
      this.reset()
    },
    // 表单重置
    reset() {
      this.form = {
        entranceName: null,
        categoryId: null,
        icon: null,
        sort: null,
        description: null
      }
      this.resetForm('form')
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNo = 1
      this.getList()
    },
    /** 重置按钮操作 */
    handleReset() {
      this.resetForm('queryForm')
      this.handleQuery()
    },
    /** 选择图标*/
    handleSelectedIcon(icon) {
      this.form.icon = icon
      if (this.form.icon) {
        this.$refs.form.clearValidate('icon')
      } else {
        this.$refs.form.validateField('icon')
      }
    },
    // 发布按钮
    handleRelease(row) {
      this.loading = true
      updateState(row.deploymentId, 1).then(() => {
        this.getList()
        this.$dtModal.msgSuccess('发布成功')
        this.loading = false
      }).catch(() => { this.loading = false })
    },
    // 挂起按钮
    handleSuspend(row) {
      this.loading = true
      updateState(row.deploymentId, 2).then(() => {
        this.getList()
        this.$dtModal.msgSuccess('挂起成功')
        this.loading = false
      }).catch(() => { this.loading = false })
    },
    // 查看流程图
    handleDetail(row) {
      this.imgUrl = null
      this.loading = true
      readImage(row.deploymentId).then(response => {
        this.imgUrl = 'data:image/jpg;base64,' + response.data.processImage
        this.imgDialog = true
        this.loading = false
      })
    },
    /** 打开入口配置弹窗按钮操作 */
    enterConfig(row) {
      this.open = true
      this.title = '入口信息'
      detail(row.processKey).then(res => {
        if (res.data != null) {
          this.form = res.data
          this.form.deploymentId = row.deploymentId
        } else {
          this.reset()
          this.form.deploymentId = row.deploymentId
          this.form.processKey = row.processKey
          this.form.entranceName = row.processName
        }
      })
    },
    /** 入口配置按钮 */
    submitForm() {
      this.$refs['form'].validate(valid => {
        if (valid) {
          Release(this.form).then(response => {
            this.$dtModal.msgSuccess('配置成功')
            this.open = false
            this.getList()
          })
        }
      })
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      this.$dtModal.confirm('是否确认删除流程名称为"' + row.processName + '"的数据项？').then(function() {
        return delreleaseMag(row.deploymentId)
      }).then(() => {
        this.getList()
        this.$dtModal.msgSuccess('删除成功')
      }).catch(() => {})
    },
    // 改变状态
    statusChange(row) {
      const params = {
        deploymentId: row.deploymentId,
        processKey: row.processKey
      }
      changeStatus(params).then(resp => {
        const type = resp.success ? 'success' : 'error'
        if (resp.success) {
          // 提示消息
          this.$dtMessage({
            type: type,
            message: '更新成功'
          })
          this.getList()
        }
      }).catch(res => {
        this.getList()
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.icon_class {
   ::v-deep .el-form-item__content{
      display: flex;
      .el-icon-delete{
        line-height: 36px;
        margin-left: 10px;
        cursor: pointer;
      }
    }
  }
  .processImg{
    display: flex;
    justify-content: center;
    align-content: center;
  }
</style>
